import React from "react";
import './home.scss';
import Footer from "components/Footer";

export default () => {
  return (
    <div className="house-index">
      <header className="flex jc-c aic pl-15 pr-15 bg-fff fixed">
        <img src="http://static.huruqing.cn/villa/logo.png" alt="" />
        <p className="search-box rel ml-30">
          <input
            type="text"
            className="search f14"
            placeholder="搜索关键字/城市/别墅名"
          />
          <i className="icon iconfont icon-search abs"></i>
        </p>
      </header>
      <div className="swiper">
        <img
          className="w100pc"
          src="http://static.huruqing.cn/villa/391-14747552.jpg"
          alt=""
        />
      </div>
      <div className="tuijian bg-fff ovh pb-15">
        <h3 className="mt-15" style={{paddingLeft: '8px'}}>
          热门推荐
        </h3>
        <ul className="flex fw">
          <li className="mt-15 flex2 aic item">
            <img
              src="http://static.huruqing.cn/villa/67-15986836140730.jpg"
              alt=""
            />
            <span className="f12 mt-5">海边别墅</span>
          </li>
          <li className="mt-15 flex2 aic item">
            <img
              src="http://static.huruqing.cn/villa/61-15991012737380.jpg"
              alt=""
            />
            <span className="f12 mt-5">泳池别墅</span>
          </li>
          <li className="mt-15 flex2 aic item">
            <img
              src="http://static.huruqing.cn/villa/64-15991013081570.jpg"
              alt=""
            />
            <span className="f12 mt-5">温泉别墅</span>
          </li>
          <li className="mt-15 flex2 aic item">
            <img
              src="http://static.huruqing.cn/villa/70-15986836009660.jpg"
              alt=""
            />
            <span className="f12 mt-5">团建轰趴</span>
          </li>
          <li className="mt-15 flex2 aic item">
            <img
              src="http://static.huruqing.cn/villa/10-14931185260590.jpg"
              alt=""
            />
            <span className="f12 mt-5">海景套房</span>
          </li>
          <li className="mt-15 flex2 aic item">
            <img
              src="http://static.huruqing.cn/villa/2-15181678196720.jpg"
              alt=""
            />
            <span className="f12 mt-5">民宿客栈</span>
          </li>
          <li className="mt-15 flex2 aic item">
            <img
              src="http://static.huruqing.cn/villa/5-14931185084110.jpg"
              alt=""
            />
            <span className="f12 mt-5">轻奢酒店</span>
          </li>
        </ul>
      </div>
      <div className="hotCity mt-10 bg-fff ovh">
        <h3 className="flex aic pl-8">热门城市</h3>
        <ul className="list flex fw">
          <li className="item fcc">深圳</li>
          <li className="item fcc">惠州</li>
          <li className="item fcc">广州</li>
          <li className="item fcc">清远</li>
          <li className="item fcc">河源</li>
          <li className="item fcc">江门</li>
          <li className="item fcc">厦门</li>
          <li className="item fcc">三亚</li>
        </ul>
      </div>
      <div className="target mt-10 bg-fff">
        <h3 className="h40 flex aic pl-8">目的地推荐</h3>
        <ul className="list">
          <a className="item" href="/target">
            <div className="img-box rel">
              <img
                className="w100pc"
                src="https://img.villaday.com/images/house_392/88870280/88870280-10-14757134.jpg"
                alt=""
              />
              <span className="h40 fcc price fff abs">¥3288</span>
            </div>
            <div className="desc f14 pb-10">
              <h3 className="mt-10 f12">大鹏古城·​千语居7房客栈</h3>
              <p className="mt-10 f10 lh15">
                浪漫美景+免费WIFI、电视、齐全设备=完美假期。
              </p>
              <p className="city fcc mt-5 f10">深圳●大鹏新区</p>
            </div>
          </a>
          <a className="item" href="/target">
            <div className="img-box rel">
              <img
                className="w100pc"
                src="https://img.villaday.com/images/merchant/10479/audit_house/4Df6aScBpT.jpg"
                alt=""
              />
              <span className="h40 fcc price fff abs">¥2280</span>
            </div>
            <div className="desc f14 pb-10">
              <h3 className="mt-10 f12">较场尾·罗马假日海边度假民宿9房</h3>
              <p className="mt-10 f10 lh15">
                浪漫美景+免费WIFI、电视、齐全设备=完美假期。
              </p>
              <p className="city fcc mt-5 f10">深圳●大鹏新区</p>
            </div>
          </a>
          <a className="item" href="/target">
            <div className="img-box rel">
              <img
                className="w100pc"
                src="https://img.villaday.com/images/merchant/11786/audit_house/7PbXJtcpwr.jpg"
                alt=""
              />
              <span className="h40 fcc price fff abs">¥1080</span>
            </div>
            <div className="desc f14 pb-10">
              <h3 className="mt-10 f12">深圳较场尾·蔚蓝沿海民宿6房</h3>
              <p className="mt-10 f10 lh15">
                深圳较场尾蔚蓝沿海民宿，整栋有6间客房，两间大床房，四间双床房，房间都有独立卫生间，6房10床包场适合入住10—18人。民宿有烧烤设施，自动麻将机，KTV设备，投影设备等。包场可以烧烤唱歌打麻将打火锅，装修温馨典雅，步行到海边大概三分钟，
              </p>
              <p className="city fcc mt-5 f10">深圳●大鹏新区</p>
            </div>
          </a>
          <a className="item" href="/target">
            <div className="img-box rel">
              <img
                className="w100pc"
                src="https://img.villaday.com/images/merchant/10645/audit_house/CbSzQkKA2E.jpg"
                alt=""
              />
              <span className="h40 fcc price fff abs">¥2688</span>
            </div>
            <div className="desc f14 pb-10">
              <h3 className="mt-10 f12">深圳较场尾大鹏古城8房一厅独栋客栈</h3>
              <p className="mt-10 f10 lh15">
                距离大鹏所城南门仅20米、步行较场尾海滩6分钟、带独立院子、麻将
              </p>
              <p className="city fcc mt-5 f10">深圳●大鹏新区</p>
            </div>
          </a>
          <a className="item" href="/target">
            <div className="img-box rel">
              <img
                className="w100pc"
                src="https://img.villaday.com/images/house_127/267520127/267520127-10-15061214.jpg"
                alt=""
              />
              <span className="h40 fcc price fff abs">¥2280</span>
            </div>
            <div className="desc f14 pb-10">
              <h3 className="mt-10 f12">较场尾·阳光海岸精品客栈6房</h3>
              <p className="mt-10 f10 lh15">
                现代风格独栋精品客栈，步行到较场尾沙滩约1分钟，毗邻较场尾P1停车场，停车方便
              </p>
              <p className="city fcc mt-5 f10">深圳●大鹏新区</p>
            </div>
          </a>
          <a className="item" href="/target">
            <div className="img-box rel">
              <img
                className="w100pc"
                src="https://img.villaday.com/images/house_528/299193872/299193872-10-14832338.jpg"
                alt=""
              />
              <span className="h40 fcc price fff abs">¥2780</span>
            </div>
            <div className="desc f14 pb-10">
              <h3 className="mt-10 f12">较场尾·海角七号客栈11房包栋</h3>
              <p className="mt-10 f10 lh15">
                听涛入梦水天一色，日出观海红霞破晓
              </p>
              <p className="city fcc mt-5 f10">深圳●大鹏新区</p>
            </div>
          </a>
          <a className="item" href="/target">
            <div className="img-box rel">
              <img
                className="w100pc"
                src="https://img.villaday.com/images/house_162/349365410/349365410-10-14844380.jpg"
                alt=""
              />
              <span className="h40 fcc price fff abs">¥14278</span>
            </div>
            <div className="desc f14 pb-10">
              <h3 className="mt-10 f12">较场尾·阿罗哈客栈36房包场</h3>
              <p className="mt-10 f10 lh15">
                一线海景民宿，出门即是沙滩，北欧简约风格。
              </p>
              <p className="city fcc mt-5 f10">深圳●大鹏新区</p>
            </div>
          </a>
        </ul>
      </div>
      <Footer/>
    </div>
  );
};
